<template>
  <el-dialog
    :title="$t('workOrderClient.Modify')"
    :visible="visible"
    destroy-on-close
    width="350px"
    @close="onClose"
    @open="onOpen"
  >
    <el-form :ref="refName" :model="ruleForm" label-width="85px" :rules="rules">
      <el-form-item
        v-if="modifyType === 'type'"
        :label="$t('workOrderClient.typeName')"
        prop="typeCode"
      >
        <el-select
          v-model="ruleForm.typeCode"
          :placeholder="$t('workOrderClient.chooseType')"
        >
          <el-option
            v-for="(wotItem, index) in woTypeList"
            :key="index"
            :label="wotItem.dictValue"
            :value="wotItem.dictKey"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-else
        :label="$t('workOrderClient.moduleName')"
        prop="moduleCode"
      >
        <el-select
          v-model="ruleForm.moduleCode"
          :placeholder="$t('workOrderClient.chooseModul')"
        >
          <el-option
            v-for="(wotItem, index) in moduleDictList"
            :key="index"
            :label="wotItem.dictValue"
            :value="wotItem.dictKey"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <span slot="footer" style="text-align: center">
      <el-button type="primary" :loading="loading" @click="onSubmit">
        {{ $t('btns.submit') }}
      </el-button>
      <el-button @click="$emit('update:visible', false)">
        {{ $t('btns.cancel') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
// import { Message } from 'element-ui'
import { editWo } from '@/api/workOrder'
//  type , module

export default {
  name: 'OrderEdit',
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    modalData: {
      type: Object,
      default() {
        return {}
      }
    },
    modifyType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      refName: 'ruleForm',
      ruleForm: {}
    }
  },
  computed: {
    ...mapGetters(['dicMap', 'dicCodes', 'loading']),
    woType() {
      return this.dicCodes['workOrderType']
    },
    moduleCode() {
      return this.dicCodes['workOrderModule']
    },
    woTypeList() {
      return this.dicMap[this.woType]
    },
    moduleDictList() {
      return this.dicMap[this.moduleCode]
    },
    rules() {
      if (this.modifyType === 'type') {
        return {
          typeCode: [
            {
              required: true,
              message: this.$t('workOrderClient.chooseType'),
              trigger: 'blur'
            }
          ]
        }
      }
      return {
        moduleCode: [
          {
            required: true,
            message: this.$t('workOrderClient.chooseModul'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.$store.dispatch('common/getI18nDict', this.woType)
    this.$store.dispatch('common/getI18nDict', this.moduleCode)
  },
  methods: {
    onClose() {
      this.$refs[this.refName].resetFields()
      this.ruleForm = {}
      this.$emit('update:visible', false)
    },
    onOpen() {
      this.ruleForm = Object.assign({}, this.modalData)
    },
    onSubmit() {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }

        this.onEditWo(Object.assign({}, this.ruleForm))
      })
    },
    //  编辑 工单
    async onEditWo(data) {
      const { success } = await editWo(data)
      if (success) {
        this.$store.dispatch('workOrder/loadWorkOrderById')
        this.onClose()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
